<template>
	<view id="cartPage">
		<view class="cart" v-for="(item,index) in list" :key="item.id">
			<view class="pic-area" @click="doCheck(item)">
				<image v-if="!item.checked" key="no" class="sel-ico" src="../../static/img/Btn_select.png" mode="aspectFill"></image>
				<image v-else key="yes" class="sel-ico" src="../../static/img/Btn_select_per.png" mode="aspectFill"></image>
				<image class="pic" src="../../static/img/cart-img.png" mode="aspectFill"></image>
			</view>
			<view class="con">
				<view class="title">
					{{item.name}}
				</view>
				<view class="row">
					尺寸：{{item.size}}
				</view>
				<view class="row">
					材质：{{item.material}}
				</view>
				<view class="row">
					样式：{{item.style}}
				</view>
				<view class="price">
					<text class="unit">￥</text>{{item.price}}
				</view>
				<uni-number-box class="num-box" :min="1" :max="9999" @change="numChange($event,index)" :value="item.num"></uni-number-box>
			</view>
			<image class="reduce" src="../../static/img/reduce.png" mode="" @click="removeCart(item.id)"></image>
		</view>
		<view class="cart-after">
			
		</view>
		<view class="cart-footer">
			<view class="check-all" @click="doCheckAll">
				<image v-if="!isCheckAll" key="check" class="check-ico" src="../../static/img/Btn_select.png" mode="aspectFill"></image>
				<image v-else key="checked" class="check-ico" src="../../static/img/Btn_select_per.png" mode="aspectFill"></image>
				<view class="lab">全选</view>
			</view>
			<view class="total-wrapper">
				<view class="total-tit down15">
					<text class="total-label">总计：</text>
					<text class="total-price">￥{{total}}</text>
				</view>
				<!-- <view class="total-detail" @click="open">
					<text class="det-txt">价格明细</text>
					<image class="det-arrow" src="../../static/img/arrow-down.png" mode="aspectFill"></image>
				</view> -->
			</view>
			<view class="sumbit" @click="toOrder">
				提交订单
			</view>
		</view>
		<view class="modal" v-show="showAct">
			<view class="detail">
				<view class="detail-title">
					价格明细
					<image class="close" src="../../static/img/close.png" mode="aspectFill" @click="close"></image>
				</view>
				<view class="detail-item">
					<view class="item-key">
						产品价格
					</view>
					<view class="item-val">
						￥89.00
					</view>
				</view>
				<view class="detail-item">
					<view class="item-key">
						运费
					</view>
					<view class="item-val">
						￥89.00
					</view>
				</view>
				<view class="detail-item">
					<view class="item-key">
						税费(17%)
					</view>
					<view class="item-val">
						￥89.00
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniNumberBox from "@/components/uni-number-box/uni-number-box.vue"
	import { goods } from '../../utils/data.js'
	export default {
	    components: {uniNumberBox},
		data() {
			return {
				list: goods.map(item=> {
					item.total = item.price * item.num
					return item
				}),
				showAct: false,
				isCheckAll: false
			}
		},
		computed: {
			total() {
				let sums = this.list.map(item=>{
					if (item.checked) {
						return item.total
					}
				})
				
				let tot = sums.reduce((t=0,n=0) => {
					return t+n
				})
				return tot || 0
			}
		},
		methods: {
			doCheck(item) {
				item.checked = !item.checked
			},
			removeCart(id) {
				uni.showModal({
					title: '移出',
					content: '把该商品移出购物车？',
					cancelText: '取消',
					confirmText: '确定',
					success(res) {
						res.confirm && console.log(id)
					}
				});
			},
			numChange(val,i) {
				this.list = this.list.map((item,index) => {
					if (i===index) {
						item.num = val
					}
					item.total = item.price * item.num
					return item
				})
				
			},
			doCheckAll() {
				this.isCheckAll = !this.isCheckAll
				this.list = this.list.map(item => {
					item.checked = this.isCheckAll
					return item
				})
			},
			open() {
				this.showAct = true
			},
			close() {
				this.showAct = false
			},
			toOrder() {
				uni.navigateTo({
					url: '../order/order',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>

<style>
.cart {
	position: relative;
	height: 265upx;
	border-bottom: 12upx solid #F7F7F7;
	display: flex;
	padding: 29upx 27upx 14upx 0;
}
.reduce {
	position: absolute;
	right: 20upx;
	top: 20upx;
	width: 40upx;
	height: 40upx;
	z-index: 1;
}
.cart-after {
	height: 85upx;
}
.pic-area {
	flex: 2 310upx 0;
	display: flex;
	align-items: center;
}
.sel-ico {
	width: 37upx;
	height: 37upx;
	margin: 0 26upx 0 29upx;
}
.pic {
	width: 218upx;
	height: 218upx;
}
.con {
	flex: 3;
	margin-left: 32upx;
}
.title {
	width:276upx;
	font-size:30upx;
	font-weight:500;
	color:rgba(51,51,51,1);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.row {
	font-size:20upx;
	font-weight:400;
	color:rgba(102,102,102,1);
	margin: 10upx 0 0 0;
}
.price {
	font-size:34upx;
	font-weight:bold;
	color:rgba(234,10,42,1);
	margin: 20upx 24upx 0 0;
}
.unit {
	font-size:24upx;
	font-weight:500;
}
.num-box {
	position: absolute;
	right: 27upx;
	bottom: 15upx;
}

.modal {
	background:rgba(0,0,0,.6);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 4;
}
.detail {
	height: 353upx;
	background: #FFFFFF;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 750upx;
}
.detail-title {
	height: 63upx;
	font-size:28upx;
	font-weight:500;
	color:rgba(0,0,0,1);
	position: relative;
	line-height: 63upx;
	text-align: center;
}
.close {
	position: absolute;
	top: 28upx;
	right: 63upx;
	width: 28upx;
	height: 28upx;
}
.detail-item {
	height: 63upx;
	padding: 0 44upx 0 46upx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 28upx;
	border-bottom: 1upx solid #F7F7F7;
}
.item-key {
	color: #666666;
}
.item-val {
	color: #000000;
}

</style>
